<template>
  <div class="dialog">
    <div class="title">新增上云系统</div>
    <div class="msg">
      <el-form :model="cloudSystem" ref="cloudSystem" style="width: 100% !important;" :rules="rules"
        label-width="120px">
        <div class="wrap" style="margin-top: 20px;">
          <div class="item">
            <el-form-item label="系统名称:" prop="projectname">
              <el-input style="width: 200px" size="mini" placeholder="请输入系统名称" v-model="cloudSystem.projectname"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上线时间:" prop="onlinetime">
              <el-date-picker v-model="cloudSystem.onlinetime" type="date" style="width: 200px" clearable
                value-format="yyyy-MM-dd" placeholder="请选择上线时间">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="业务部门:" prop="officeId">
              <el-cascader :props="{value:'id',checkStrictly: true}"  :show-all-levels="false" @change="deptChange" style="width: 200px"
                placeholder="请选择，可搜索" :options="dept" clearable filterable></el-cascader>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="业主方联系人:" prop="contacts">
              <el-select clearable style="width: 200px" v-model="cloudSystem.contacts"
                :placeholder="cloudSystem.officeId?'请选择业主方联系人':'请先选择业务部门'">
                <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName">
                </el-option>
              </el-select>
              <!-- <el-input
                         style="width: 200px"
                         size="mini"
                         placeholder=""
                         v-model="cloudSystem.contacts"
                         clearable>
                       </el-input> -->
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="联系电话:" prop="contactsinfo">
              <el-input style="width: 200px" size="mini" placeholder="请输入联系电话" v-model="cloudSystem.contactsinfo"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="email">
              <el-input style="width: 200px" size="mini" placeholder="请输入邮箱" v-model="cloudSystem.email" clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="承建单位:" prop="constunit">
              <el-input style="width: 200px" size="mini" placeholder="请选择承建单位" v-model="cloudSystem.constunit"
                clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="承建方联系人:" prop="constcts">
              <el-input style="width: 200px" size="mini" placeholder="请输入承建方联系人" v-model="cloudSystem.constcts"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="联系电话:" prop="constctsinfo">
              <el-input style="width: 200px" size="mini" placeholder="请输入联系电话" v-model="cloudSystem.constctsinfo"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="constemail">
              <el-input style="width: 200px" size="mini" placeholder="请输入邮箱" v-model="cloudSystem.constemail" clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>


        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item label-width="200px" label="系统建设（运维）资金来源:" prop="fundFromRadio">
            <el-radio-group  v-model="cloudSystem.fundFromRadio">
               <el-radio  label="1">区（县）</el-radio>
               <el-radio  label="2">市级</el-radio>
               <el-radio  label="3">
                 <el-input style="width: 200px" size="mini" placeholder="请输入其他资金来源" v-model="cloudSystem.fundFrom"
                   clearable>
                 </el-input>
               </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item style="width: 100%;" label-width="200px" label="自行落实部门上云经费:" prop="fundBySelf">
            <el-radio-group  v-model="cloudSystem.fundBySelf">
              <el-radio  label="1">是</el-radio>
              <el-radio  label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item style="width: 100%;" label="项目简介:" prop="introduction">
            <el-input type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入项目简介"
              v-model="cloudSystem.introduction">
            </el-input>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px);">
          <el-form-item style="width: 100%;" label="申请理由:" prop="remarks">
            <el-input type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入申请理由"
              v-model="cloudSystem.remarks">
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    listUser2
  } from "@/api/system/user";
  export default {
    name: "addA",
    components: {},
    props: {
      dept: {
        type: Array,
        default: []
      }
    },
    data() {
      var validateFundFrom = (rule, value, callback) => {
        if (value === '3') {
          if (this.cloudSystem.fundFrom) {
            callback();
          } else {
            callback(new Error('请输入其他资金来源'));
          }
        } else if (value === '') {
          callback(new Error('请选择系统建设（运维）资金来源'));
        } else {
          callback();
        }
      };
      return {
        //用户列表
        users: [],
        cloudSystem: {
          projectname: '', //系统名称
          officeId: '', //业务部门Id
          officeName: '', //业务部门名称
          onlinetime: '', //上线时间


          contacts: '', //联系人id
          contactsNickName: '', //联系人名称
          contactsinfo: '', //联系电话
          email: '', //联系邮箱

          constunit: '', //承建单位
          constcts: '', //承建联系人姓名
          constctsinfo: '', //承建联系方式
          constemail: '', //承建邮箱



          fundFromRadio: '', //系统建设（运维）资金来源选择
          fundFrom: '', //系统建设（运维）资金来源  最终值
          fundBySelf: '', //自行落实部门上云经费

          introduction: '', //项目简介
          constunit: '', //承建单位
          remarks: '', //申请理由

        },
        isIndeterminate: true,
        checkAll: false,
        rules: {
          projectname: [{
            required: true,
            message: '请输入系统名称',
            trigger: 'blur'
          }, ],
          officeId: [{
            required: true,
            message: '请选择业务部门',
            trigger: 'change'
          }, ],
          onlinetime: [{
            required: true,
            message: '请选择上线时间',
            trigger: 'change'
          }, ],
          contacts: [{
            required: true,
            message: '请选择业主方联系人',
            trigger: 'change'
          }, ],
          contactsinfo: [{
            required: true,
            message: '请输入业主方联系电话',
            trigger: 'blur'
          }, ],
          email: [{
            required: true,
            message: '请输入业主方联系邮箱',
            trigger: 'blur'
          }, ],

          constunit: [{
            required: true,
            message: '请输入承建单位',
            trigger: 'blur'
          }, ],
          constcts: [{
            required: true,
            message: '请输入承建方联系人',
            trigger: 'blur'
          }, ],
          constctsinfo: [{
            required: true,
            message: '请输入承建方联系人电话',
            trigger: 'blur'
          }, ],
          constemail: [{
            required: true,
            message: '请输入承建方联系人邮箱',
            trigger: 'blur'
          }, ],
          fundFromRadio: [{
            required: true,
            validator: validateFundFrom,
            trigger: 'change'
          }, ],
          fundBySelf: [{
            required: true,
            message: '请选择是否自行落实部门上云经费',
            trigger: 'change'
          }, ],
          introduction: [{
            required: true,
            message: '请输入项目简介',
            trigger: 'blur'
          }, ],
          remarks: [{
            required: true,
            message: '请输入申请理由',
            trigger: 'blur'
          }, ],
        },
        input2: 0,

      };
    },
    created() {},
    methods: {
      next() {
        this.$refs.cloudSystem.validate((valid) => {
          if (valid) {
            this.users.some(item => {
              if (item.userId == this.cloudSystem.contacts) {
                this.cloudSystem.contactsNickName = item.nickName
                return true
              }
            })
            this.$emit('next', this.cloudSystem)
          } else {
            return false;
          }
        });
      },
      getName(data, id) {
        data.forEach(item => {
          if (item.id == id) {
            this.cloudSystem.officeName = item.label
          } else if (item.children && item.children.length) {
            this.getName(item.children, id)
          }
        })
      },
      //业务部门变化
      deptChange(e) {
        this.users = []
        this.cloudSystem.contacts = ''
        this.cloudSystem.officeId = ''
        if (e.length) {
          this.cloudSystem.officeId = e[e.length - 1]
          this.getName(this.dept, this.cloudSystem.officeId)
          listUser2({
            deptId: this.cloudSystem.officeId,
            pageNum: 1,
            pageSize: 10000000
          }).then(response => {
            this.users = response.rows
          })
        }
      },
      handleCheckAllChange(val) {
        this.checked = val ? this.options : [];
        this.isIndeterminate = false;
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.options.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
      },
      //清空
      reset(){
         this.$refs.cloudSystem.resetFields()
      }

    }
  };
</script>
<style scoped lang="less">
  .dialog {
    margin-bottom: 30px;
    font-size: 12px;
    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }

    .msg {
      padding: 0 20px 20px 0px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
      border-radius: 10px;

      .wrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .item {
        margin-left: 20px;
        width: calc(33.33% - 20px);
        min-width: 340px;
        display: flex;
      }
    }
  }
</style>
